import React, { FC } from 'react';
import TabBar from '../../../components/tab-bar';
import { Card, Form, Input, Button, ImageUploader } from 'antd-mobile';
import { useHistory } from 'react-router-dom';
import { httpJson } from "../../../services/http";
import { mockUpload } from '../../../utils/utils';
import './style.css';

// 店铺信息页
const StoreInformation: FC = (props: any) => {
    const history = useHistory();
    console.log("上一页中的注册信息，包括手机号密码，确认密码", props.location.state);
    const storeInfoObj = {
        telephone: props.location?.state?.username,
        password: props.location?.state?.password,
        merchantName: "",
        address: "",
        logoUrl: "", // 环境图
        businessLicense: "" // 营业执照
    }

    const register = () => {
        console.log("storeInfoObj", storeInfoObj)
        httpJson('POST', '/api/merchant/register', storeInfoObj)
            .then((res: any) => {
                console.log("商家注册成功返回信息", res);
                if (res.data.code == '200') {
                    history.push({
                        pathname: "/merLogReg/logSuccess",
                        state: { type: "merchant" }
                    });
                }
            })
            .catch(err => {
                console.log(err)
            })
    }

    return (
        <div className='storeInfo'>
            <TabBar goBack={() => { console.log("商家返回") }} regText="店铺信息" cenText="商家注册" />
            <div className='content'>
                <Card title='开店人信息' >
                    <Form>
                        <Form.Item name='姓名'>
                            <Input placeholder='请输入姓名' clearable />
                        </Form.Item>
                        <Form.Item name='身份证'>
                            <Input placeholder='请输入身份证' clearable />
                        </Form.Item>
                    </Form>
                </Card>
                <Card title='店铺信息' >
                    <Form>
                        <Form.Item name='牌匾名'>
                            <Input
                                clearable
                                placeholder='请输入店铺牌匾名'
                                onChange={(val: any) => storeInfoObj["merchantName"] = val}
                            />
                        </Form.Item>
                        <Form.Item name='门店地址'>
                            <Input
                                clearable
                                placeholder='请输入门店地址'
                                onChange={(val: any) => storeInfoObj["address"] = val}
                            />
                        </Form.Item>
                    </Form>
                </Card>
                <Card title='其它信息'>
                    <div className='file'>
                        <span className='title'>环境图</span>
                        <ImageUploader
                            upload={mockUpload}
                            onChange={(val: any) => storeInfoObj["logoUrl"] = val[0]?.url}
                        />
                    </div>
                    <div className='file'>
                        <span className='title'>营业执照</span>
                        <ImageUploader
                            upload={mockUpload}
                            onChange={(val: any) => storeInfoObj["businessLicense"] = val[0]?.url}
                        />
                    </div>
                </Card>
            </div>
            <Button block
                color='primary'
                size='large'
                type='submit'
                onClick={() => register()}
            >
                提交注册
            </Button>
        </div>
    )
}
export default StoreInformation;
